<template>
  <div class="input_userInfo">
    <h3>学生信息填报表</h3>
    <div class="input_container">
      <div class="item">姓名：<input type="text" v-model="inputInfo.name" /></div>
      <div class="item">性别：<input type="text" v-model="inputInfo.gender" /></div>
      <div class="item">年龄：<input type="number" v-model="inputInfo.age" /></div>
      <div class="item">语文：<input type="number" v-model="inputInfo.yuwen" /></div>
      <div class="item">数学：<input type="number" v-model="inputInfo.math" /></div>
      <div class="item">英语：<input type="number" v-model="inputInfo.english" /></div>
      <!-- 第一种方法 -->
      <!-- <div class="btn" @click="$emit('add-student',inputInfo)">提交</div> -->

      <!-- 第二种方法 -->
      <div class="btn" @click="add">提交</div>
    </div>
  </div>
</template>
<script>
import { reactive } from 'vue'
export default {
  emits: ['addStudent'],
  // 第二种的第一种触发方法
  // #region
  // setup(props,cxt) {
  //   const inputInfo = reactive({ name: '', age: 0, gender: '', srcImg: require('@/assets/img/1.jpg'), yuwen: 0, math: 0, english: 0, show: false })
  //   const add = () => {
  //     cxt.emit('addStudent', inputInfo)
  //   }
  //   return {
  //     inputInfo,
  //     add
  //   }
  // }
  // #endregion

  // 第二种的第二种触发方法
  setup(props, { emit }) {
    const inputInfo = reactive({ name: '', age: 0, gender: '', srcImg: require('@/assets/img/1.jpg'), yuwen: 0, math: 0, english: 0, show: false })
    const add = () => {
      emit('addStudent', inputInfo)
    }
    return {
      inputInfo,
      add
    }
  }
}
</script>
